<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HqkqTNriWCoItTPyirDYAVQ8"></script>
    <script src="/js/map.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/highcharts.js"></script>
    <script src="/js/series-label.js"></script>
    <script src="/js/random.js"></script>
    <script src="/js/time.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/jquery.js"></script>
    <link rel="stylesheet" href="/css/map.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <style type="text/css">
        #summary {
            width: 153px;
            height: 248px;
            top: 17px;
            left: 25px;
            background-color: #222d3a;
            text-align: center;
            color: #fff;
            opacity: .8;
            border-radius: 3px;
        }
    </style>
</head><body onload="showTime()">
<div class="main">
    <div class="warp">
        <div class="container">
            <!-- 百度地图API -->
           <div class="contentmap">
                <div id="allmap" style="width:100%;height: 750px;"></div>
            </div>
            <!-- 信息显示 -->
            <div id="summary" style="position:absolute;z-index:999;">
                <div class="head_nav"
                     style="height:40px;border-bottom:1px solid #fff;">
                    <h3>全囯</h3>
                    <input id="p" style="width:137px;">
                </div>

                <div class="msg" style="">
                    <div class="msg_nav nav1">
                        <input id="equipment_num" value="0">
                        <p>设备数量</p>
                    </div>
                    <div class="msg_nav nav2">
                        <input id="run_equipment_num" value="0">
                        <p>运行中设备数量</p>
                    </div>
                    <div class="msg_nav nav3">
                        <input id="error_equipment_num" value="0">
                        <p>异常设备数量</p>
                    </div>
                    <div class="msg_nav nav4">
                        <input id="unc_equipment_num" value="0">
                        <p>未接入设备数量</p>
                    </div>
                </div>
            </div>
            <!-- 客户数 -->
            <div class="customer_num" style="">
                <h3>客户数</h3>
                <h2>
                    <input id="customer_num" value="1" disabled="disabled">
                </h2>
            </div>

            <!-- 总功率曲线图 -->
            <div
                    style="position:absolute;width:315px;height:316px;left:190px;top:18px;background-color: #222d3a;opacity:.8;z-index:99;">
                <div
                        style="height:122px;padding:2px;border-bottom:1px solid #546c82;color:#fff">
                    <p class="run_msg1">
                        <span>总的功率</span> <input type="text" id="totalP" value="">
                    </p>
                    <p class="run_msg2">
                        <span>总的故障信息量</span> <input type="text" id="totalborken"
                                                    value="0">
                    </p>
                    <p class="run_msg3">
                        <span>总的预警信息量</span> <input type="text" id="totalwarn"
                                                    value="0">
                    </p>
                </div>
                <div id="power_curve"
                     style="height:193px;left:190px;top:186px;background-color: #222d3a;opacity:.8;z-index:99;">
                </div>
            </div>
            <!-- 故障和告警信息 -->
            <div id="warnning"
                 style="position:absolute;width:244px;height:230px;right:0;top:62px;z-index:99999;background-color: #334556;">
                <div id="popBox" style="display:block;">
                    <div class="close">
                        <a href="javascript:void(0)" onclick="closeBox()"
                           style="color:#fff;">×</a>
                    </div>
                    <div id="warnmsg">

                    </div>
                </div>
            </div>
            <!--效果html结束-->
            <div class="clear"></div>

        </div>
    </div>
</div>



</body>
<script type="text/javascript">
    //功率曲线图
    Highcharts.setOptions({
        colors : [ '#5899da' ]
    });
    Highcharts.setOptions({
        global : {
            useUTC : false
        }
    });
    function activeLastPointToolip(chart) {
        var points = chart.series[0].points;
        chart.tooltip.refresh(points[points.length - 1]);
    }
    var chart = Highcharts.chart('power_curve', {
        chart : {
            type : 'spline',
            marginRight : 10,
            backgroundColor : '#222d3a',
            plotBorderWidth : 0,
            marginRight : 5,
            ignoreHiddenSeries : true,
            reflow : true,
            spacingTop : 2, //图表上方的空白
            spacingRight : 1,
            spacingLeft : 3,
            // spacingBottom: 30,
            borderRadius : 5,
            events : {
                load : function() {
                    var series = this.series[0], chart = this;
                    activeLastPointToolip(chart);
                    setInterval(function() {
                        var x = (new Date()).getTime(), // 当前时间
                            y = 899 + Math.random() * 100; // 随机值
                        series.addPoint([ x, y ], true, true);
                        activeLastPointToolip(chart);
                    }, 3000);
                }
            }
        },
        title : {
            text : '总功率曲线图',
            useHTML : true,
            style : {
                color : '#fff',
                "fontSize" : "16px" //字体大小
            }
        },
        xAxis : {
            type : 'datetime',
            tickPixelInterval : 150,
            labels : {//设置横轴坐标的显示样式
                align : 'center',
                style : {
                    color : '#fff'
                }
            }
        },
        yAxis : {
            title : {
                text : null
            },
            labels : {//设置横轴坐标的显示样式
                align : 'center',
                style : {
                    color : '#fff'
                }
            }
        },
        tooltip : {
            formatter : function() {
                return '<b>' + this.series.name + '</b><br/>' +
                    //Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        legend : {
            enabled : false
        },
        series : [ {
            name : '总功率',
            data : (function() {
                // 生成随机值
                var data = [], time = (new Date()).getTime(), i;
                for (i = -19; i <= 0; i += 1) {
                    data.push({
                        x : time + i * 1000,
                        y : 899 + Math.random() * 100
                    });
                }
                return data;
            }())
        } ]
    });
</script>
<script type="text/javascript">
    function warningshow() {
        var popBox = document.getElementById("popBox");
        var warnmsg = document.getElementById("warnmsg");
        popBox.style.display = "block";
        warnmsg.style.display = "block";
    };
</script>
<script type="text/javascript">
     create();
</script>
<script type="text/javascript">
    setInterval(function() {
        $("#warnmsg").load(location.href + " #warnmsg");
        warningshow();
    }, 300000);
    $.ajax({
        url:"/limit",
        async:false,
        type : "GET",
        dataType : "json",
        success : function(data) {
            if(data.status==true){
                $("#customer_num").val(data.count);
                num = data["list"];
                for (var i = 0; i<num.length;i++){
                    var content = "";
                    var tip = "";
                    content += "姓名:"+num[i]["realName"] + "\n";
                    content += "手机："+num[i]["mobile"]+ "\n" ;
                    content += "邮箱："+num[i]["email"]+ "\n";
                    content += "地址："+ num[i]["address"];

                    tip += "姓名:"+num[i]["realName"];
                    tip += "手机："+num[i]["mobile"] ;
                    tip += "邮箱："+num[i]["email"];
                    tip += "地址："+ num[i]["address"];
                    geocodeSearch(num[i]["address"],content,tip);
                }
                return;
            }else {
                alert("数据获取失败！");
                return ;
            }
        }
    });
</script>
<script>
    $.ajax({
        url:"/clients",
        async:false,
        type : "GET",
        dataType : "json",
        success : function(data) {
            if(data.status==true){
                item = data["data"];
                for(var i = 0;i<item.length;i++){
                    alar = "<div class='onemsg' style=border-left:6px solid #e9b363;border-radius:3px;'>" +
                        "<span>"+item[i]['name']+"</span>\n"+
                        "<span>"+item[i]['details']+"</span>\n"+
                        "<span>"+transformTime(item[i]['createdTime'])+"</span>"+
                        "</div>";
                }
                $("#warnmsg").append(alar);
                return;
            }else {
                alert("数据获取失败");
                return
            }
        }
    });
    //
    // $.ajax({
    //     url:"/del",
    //     async:false,
    //     type : "PUT",
    //     dataType : "json",
    //     data:{
    //         s_form_data : JSON.stringify({"id":"1ea1255852843708bb6b9981da13b23","address":"河南省信阳市光山县"})
    //     },
    //     success : function(data) {
    //
    //     }
    // });
    $.ajax({
        type : "GET",
        async:false,
        url : "/equipmentdata",
        dataType : "json",
        success : function(data) {
            //alert(data.statusCode);
            if(data.status==true){
                $("#equipment_num").val(data.total);
                $("#run_equipment_num").val(data.online);
                $("#error_equipment_num").val(data.alarm+data. error);
                $("#unc_equipment_num").val(data.active-data.online);
                $("#totalborken").val(data.error);
                $("#totalwarn").val(data.alarm);
                return ;
            }else {
                alert("数据获取失败！");
                return ;
            }

        }
    });
    function transformTime(timestamp = +new Date()) {
        if (timestamp) {
            var time = new Date(timestamp);
            var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
            var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
            var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
            var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
            var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
            var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
            return y + '-' + M + '-' + d ;
        } else {
            return '';
        }
    }
</script>